<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/blog_list.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/logo.jpg" alt="">
        <div class="title">我的博客系统</div>
        <!-- 这只是一个空白,用于把后面的链接挤过去,只是一个简单粗暴的写法 -->

        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="">注销</a>
    </div>

    <!-- 页面主体部分 -->
    <div class="container">
        <!-- 左侧信息 -->
        <div class="container-left">
            <!-- 表示整个用户信息的区域 -->
            <div class="card">
                <!-- 用户头像 -->
                <img src="image/Profile.jpg" alt="">
                <!-- 用户名 -->
                <h3>夏彦</h3>
                <!-- GitHub地址 -->
                <a href="https://www.github.com/">GitHub</a>
                <!-- 统计信息 -->
                <div class="conter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="conter">
                    <span>5</span>
                    <span>2</span>
                </div>

            </div>

        </div>

        <!-- 右侧信息 -->
        <div class="container-right">
            <!-- 表示一个博客 -->
            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 博客发布时间 -->
                <div class="date">2023-05-20</div>
                <!-- 博客摘要 -->
                <div class="desc">简单清晰了解B树和B+树<p></p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我，陆沉，请做我的妻子，做我生生世世的伴侣和唯一的爱人
                    你是我永不枯萎的欲望，你是我最深的堕落与沉迷
                    我承诺永远地爱你，无论受到祝福或是诅咒，无论身处天堂或是地狱
                    我将用双手带你走出绝望和痛苦。用我的心，酿造你的生命之醇酒
                    如若永劫的暗夜来临，我将燃尽我的每一寸，为你照亮生的路途</div>
                <a href="blog_detail.html?blogId=1">查看全文&gt;&gt;</a>
       
            </div>

            <!-- 表示一个博客 -->
            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第二篇博客</div>
                <!-- 博客发布时间 -->
                <div class="date">2023-05-21</div>
                <!-- 博客摘要 -->
                <div class="desc">Java中的装箱和拆箱<p></p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;人们都把婚姻想得太严肃了，明明爱情才是终身大事，结婚无非只是一个时间节点而已。
                    所以，如果让我挑选一个最佳时点。它可以是某个轰轰烈烈的夜晚。
                    也可以是某个属于豆浆和茶叶蛋的清晨，又或是某个加班结束后的黄昏。
                    只要我想，日历上的任意一天都是最佳时点。
                    </div>
                <a href="blog_detail.html?blogId=1">查看全文&gt;&gt;</a>
    
            </div>

            <!-- 表示一个博客 -->
            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第三篇博客</div>
                <!-- 博客发布时间 -->
                <div class="date">2023-05-26</div>
                <!-- 博客摘要 -->
                <div class="desc">JavaScript基本语法<p></p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我的名字是枫原万叶，游历四方的浪人。
                    飘摇风雨中，独舞思故乡。这把刀，是我与故乡唯一的联系了。
                    总有地上的生灵，敢于面对雷霆的威光。
                    清晨的鸟鸣，是大自然的馈赠。启程吧，属于我们的旅途也要开始了。
                    见到了这么美丽的景色，自然会产生云游四海的想法吧？</div>
                <a href="blog_detail.html?blogId=1">查看全文&gt;&gt;</a>
        
            </div>

        </div>

    </div>
</body>
</html>